<template>
  <div class="order-wrapper">
    <div class="top">
      <div class="title">
        <i class="el-icon-s-marketing" /> 订单统计
      </div>
      <ul>
        <li>
          <h3>￥40.00</h3>
          <p>今日销售额</p>
        </li>
        <li>
          <h3>￥120</h3>
          <p>当月订单总数</p>
        </li>
        <li>
          <h3>￥24.00</h3>
          <p>当月销售总额</p>
        </li>
        <li>
          <h3>￥120</h3>
          <p>订单总数</p>
        </li>
        <li>
          <h3>￥24.00</h3>
          <p>销售总数</p>
        </li>
      </ul>
    </div>
    <div class="bottom">
      <div class="bottom-top">
        <el-button
          v-for="(item, index) of buttonList"
          :key="index"
          :class="{ 'active': isActive === index }"
          @click="buttonClick(index)"
        >{{ item.name }}{{ '('+ item.num + ')' }}</el-button>
      </div>
      <div class="bottom-content d-flex-sb mt-35">
        <div class="d-flex">
          <Search placeholder="请输入订单号" class="mr-15" @search="handleSearch" />
          <el-form :inline="true" class="demo-form-inline mr-15" style="white-space: nowrap">
            <el-form-item label="分类筛选：">
              <el-select v-model="value1" clearable placeholder="全部" @change="selectChange">
                <el-option
                  v-for="item of classicList"
                  :key="item.id"
                  :label="item.kind_name"
                  :value="item.id"
                />
              </el-select>
              <!-- <el-cascader v-model="value" placeholder="全部" :options="classicList" clearable @change="handleChange" /> -->
            </el-form-item>
          </el-form>
          <el-form :inline="true" class="demo-form-inline mr-15" style="white-space: nowrap">
            <el-form-item label="下单时间：">
              <el-date-picker
                v-model="value2"
                type="daterange"
                align="right"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :picker-options="pickerOptions"
                format="yyyy 年 MM 月 dd 日"
                value-format="yyyy-MM-dd HH:mm:ss"
                :default-time="['00:00:00', '23:59:59']"
                @change="handleChange"
              />
            </el-form-item>
          </el-form>
        </div>
        <el-button
          type="primary"
          style="background: #00ADB3; border-color: #00ADB3"
          @click="exportOrder"
        >导出订单</el-button>
      </div>
      <div class="bottom-table">
        <table-list :list="list" />
      </div>
    </div>
    <Pagination
      class="pagination"
      :total="total"
      :cur-page="currentPage"
      @nextPage="handleNextPage"
    />
  </div>
</template>
<script>
import Search from '@/common/search'
import TableList from './table-list'
import { getOrderList, getOrderStatusNum } from '@/api/request/order'
import Pagination from '@/common/pagination'
const ERR_OK = 200
export default {
  components: {
    Search,
    TableList,
    Pagination
  },
  data() {
    return {
      num: 0,
      query: '',
      list: [],
      total: 0,
      currentPage: 1,
      buttonList: [
        { name: '待支付', num: 0 },
        { name: '已支付', num: 0 },
        { name: '已关闭', num: 0 }
      ],
      isActive: 0,
      value1: '',
      value2: '',
      classicList: [
        {
          id: 1,
          kind_name: '单章'
        },
        {
          id: 2,
          kind_name: '整章'
        }
      ],
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      },
      start_time: '',
      end_time: '',
      type: '',
      order_status: 1
    }
  },
  created() {
    this._getOrderList({
      page: this.currentPage,
      order_status: this.order_status
    })
    this._getOrderStatusNum()
  },
  methods: {
    handleSearch(query) {
      this.query = query
      this.currentPage = 1
      this._getOrderList({ page: this.currentPage, keyword: this.query })
    },
    handleNextPage(page) {
      this.currentPage = page
      this._getOrderList({ page: this.currentPage, keyword: this.query })
    },
    buttonClick(index) {
      this.isActive = index
      this.currentPage = 1
      switch (this.isActive) {
        case 0:
          this.order_status = 1
          this._getOrderList({
            page: this.currentPage,
            keyword: this.query,
            type: this.type,
            order_status: this.order_status,
            start_time: this.start_time,
            end_time: this.end_time
          })
          break
        case 1:
          this.order_status = 2
          this._getOrderList({
            page: this.currentPage,
            keyword: this.query,
            type: this.type,
            order_status: this.order_status,
            start_time: this.start_time,
            end_time: this.end_time
          })
          break
        case 2:
          this.order_status = 3
          this._getOrderList({
            page: this.currentPage,
            keyword: this.query,
            type: this.type,
            order_status: this.order_status,
            start_time: this.start_time,
            end_time: this.end_time
          })
          break
      }
    },
    selectChange(val) {
      console.log(val)
      this.currentPage = 1
      this.type = val
      this._getOrderList({
        page: this.currentPage,
        keyword: this.query,
        type: this.type,
        order_status: this.order_status,
        start_time: this.start_time,
        end_time: this.end_time
      })
    },
    handleChange(val) {
      console.log(val)
      this.currentPage = 1
      if (val) {
        this.start_time = val[0]
        this.end_time = val[1]
        this._getOrderList({
          page: this.currentPage,
          keyword: this.query,
          type: this.type,
          order_status: this.order_status,
          start_time: this.start_time,
          end_time: this.end_time
        })
      } else {
        this._getOrderList({
          page: this.currentPage,
          keyword: this.query,
          type: this.type,
          order_status: this.order_status
        })
      }
    },
    exportOrder() {
      window.location.href = `http://drumhome.izhixiu.cn/admin/order/exportOrder?keyword=${this.query}&order_status=${this.order_status}&start_time=${this.start_time}&end_time=${this.end_time}&type=${this.type}`
    },
    _getOrderList({ page, keyword, order_status, start_time, end_time, type }) {
      getOrderList({ page, keyword, order_status, start_time, end_time, type })
        .then(res => {
          if (res.code === ERR_OK) {
            console.log(res)
            this.total = res.total
            this.list = res.list
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    _getOrderStatusNum() {
      getOrderStatusNum()
        .then(res => {
          console.log(res)
          this.buttonList[0].num = res.wait_pay
          this.buttonList[1].num = res.has_pay
          this.buttonList[2].num = res.has_close
        })
        .catch(err => {
          console.log(err)
        })
    }
  }
}
</script>
<style lang="scss" scoped>
@import "@/styles/el-pagination.scss";
.order-wrapper {
  box-sizing: border-box;
  background: #fff;
  height: 100%;
  flex: 1;
  .top {
    width: 100%;
    border-radius: 4px;
    background-color: rgba(255, 255, 255, 1);
    color: rgba(245, 108, 108, 1);
    font-size: 14px;
    font-family: Roboto;
    .title {
      line-height: 60px;
      color: rgba(68, 68, 68, 1);
      font-size: 18px;
      font-family: Roboto;
      font-weight: bold;
      border-bottom: 2px solid #ccc;
      padding: 0 20px;
    }
    ul {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      justify-content: space-around;
      padding: 30px 100px;
      li {
        list-style: none;
        cursor: pointer;
        h3 {
          line-height: 52px;
          color: rgba(245, 108, 108, 1);
          font-size: 36px;
          text-align: center;
          font-family: Roboto;
          margin: 0;
        }
        p {
          line-height: 20px;
          color: rgba(102, 102, 102, 1);
          font-size: 14px;
          text-align: center;
          font-family: Roboto;
          margin: 0;
        }
      }
    }
  }
  .bottom {
    padding: 0 20px;
    box-sizing: border-box;
    .bottom-content {
      display: flex;
      align-items: center;
    }
  }
}
.el-button {
  background: #e5e5e5;
  &.active {
    background-color: #5a98de !important;
    color: #fff !important;
  }
}
.d-flex-sb {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.d-flex {
  display: flex;
  align-items: center;
}
.el-form-item {
  margin: 0;
}
.mr-15 {
  margin-right: 15px;
}
.mt-35 {
  margin-top: 35px;
}
</style>
